// 手机绑定

<template>
  <view>
    <view class="title-box">手机绑定</view>
    <!-- 输入框 -->
    <view class="input-box">
      <icon-input icon="icon-shouji" type="number" placeholder="请输入手机号" v-model="postForm.mobile"></icon-input>
      <!-- <icon-input icon="icon-yanzheng" placeholder="请输入验证码" v-model="postForm.captcha"> -->
        <!-- <template v-slot:code> -->
<!--        <template #code>
          <text class="code" @tap="getCode">{{ codeText }}</text>
        </template> -->
      <!-- </icon-input> -->
    </view>
    <!-- 按钮 -->
    <view class="btn-box" @tap="confirm">确定</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      postForm: {
        mobile: '',
        captcha: ''
      },
      codeText: '获取短信验证码',
      codeFlag: true
    }
  },
  methods: {
    // 短信验证码
    async getCode() {
      if (!this.codeFlag) return

      if (!this.postForm.mobile) {
        return uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
      }

      const res = await this.$http.post('/api/kuerp/order/sms/send', { mobile: this.postForm.mobile, event: 'changemobile' })
      if (res.code == 200) {
        this.codeFlag = false
        uni.showToast({
          title: '发送成功',
          icon: 'none'
        })
        let count = 60
        let countDown = () => {
          count--
          this.codeText = count + '秒后重新获取'
          if (count === 0) {
            clearInterval(timer)
            this.codeFlag = true
            this.codeText = '获取短信验证码'
          }
        }
        countDown()
        const timer = setInterval(() => {
          countDown()
        }, 1000)
      } else if (res.code == 500 && res.msg === '已被占用') {
        uni.showToast({
          title: '手机号已被占用',
          icon: 'none',
          mask: true
        })
      }
    },
    // 确定
    async confirm() {
      if (!this.postForm.mobile) {
        return uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
      }

      // if (!this.postForm.captcha) {
      //   return uni.showToast({
      //     title: '请输入短信验证码',
      //     icon: 'none'
      //   })
      // }

      const res = await this.$http.post('/api/kuerp/order/user/changemobile', this.postForm)
      if (res.code == 200) {
        uni.showToast({
          title: '绑定成功',
          icon: 'success',
          mask: true
        })
        const userInfoRes = await this.$http.post('/api/kuerp/order/user/userInfo')
        uni.setStorageSync('userInfo', userInfoRes.data.userinfo)
        uni.setStorageSync('token', userInfoRes.data.userinfo.token)
        setTimeout(() => {
          uni.navigateBack({ delta: 1 })
        }, 1000)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.title-box {
  margin: 80rpx 60rpx 52rpx;
  font-size: 40rpx;
  font-weight: 600;
  color: #111111;
}

// 输入框
.input-box {
  .code {
    font-size: 32rpx;
    color: #fe492f;
  }
}

// 按钮
.btn-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 80rpx auto 0;
  width: 630rpx;
  height: 80rpx;
  border-radius: 50rpx;
  font-size: 36rpx;
  font-weight: 500;
  color: #ffffff;
  background: #fe492f;
}
</style>

